import React, {Component} from 'react';
import {Route,Switch,Redirect}from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import MyNaviLink from "./component/MyNaviLink";

class App extends Component {

    render() {
        return (
            <div>
                <div className='row'>
                    <div style={{height:40,textAlign:'center'}}>
                        <h2>React Router Dome</h2>
                    </div>
                </div>

                <div style={{display:"flex",flexDirection:"row"}}>
                    <div style={{display:"flex",flexDirection:"column",flex:1,textAlign:'center'}}>
                        {/*在react中靠路由链接实现切换组件-编写路由链接*/}
                        <MyNaviLink activeClassName="about" style= {{padding:3,border:"1px solid black"}} to="/home">Home</MyNaviLink>
                        <MyNaviLink activeClassName="about" style= {{padding:3,border:"1px solid black"}} to="/about">About</MyNaviLink>
                    </div>
                    <div style={{flex:3,marginLeft:10}}>
                       {/* 注册路由-z组件随着路由变化*/}
                        <Switch>
                            <Route path="/about" component={About}/>
                            <Route path="/home" component={Home}/>
                            {/*重定向*/}
                            <Redirect to="/about"></Redirect>
                        </Switch>

                    </div>
                </div>

            </div>
        );
    }
}

export default App;